<template>
	<view>
		<nav-bars title="微视转发记录"></nav-bars>
		<view class="staff" :style="{ top: navHeight + 'px' }" v-if="isStaff">
			<view class="staff_text">员工</view>
			<!-- flex: 1;height: 100%; -->
			<scroll-view scroll-x="true" @scrolltolower="PromoterScrool" style="overflow-y: auto;">
				<view class="staff_list">
					<view class="staff_item" v-for="(item, index) in StaffList" :key="index">
						<view class="staff_Image" :style="{ 'border-color': item.current == true ? '#d5ac4e' : '#fff' }" @click="SelectStaff(item, index)">
							<image :src="item.headimg" mode=""></image>
						</view>
						<view class="staff_Name TextAuto">{{ item.nickname }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="history" :style="{ 'margin-top': isStaff ? 175 + 'px' : 0 }">
			<view v-for="(item, index) in list" :key="index">
				<view class="history_date">{{ item.date }}</view>
				<view class="history_Mian" v-for="(items, indexs) in item.list" :key="indexs">
					<view class="history_left">
						<view class="history_Img"><image :src="items.headimg.path"></image></view>
						<view style="flex: 1;">
							<view class="history_name TextAuto">{{ items.nickname }}</view>
							<view class="history_Phone">{{ PhoneNumChange(items.mobile) }}</view>
						</view>
					</view>
					<view class="history_time">{{ items.time }}</view>
				</view>
			</view>
			<view v-if="list.length == 0" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">
				<u-empty text="暂无数据" mode="list" icon-size="550" src="https://cos.ryz1620.com/liankun/static/nullBg.png"></u-empty>
			</view>
			<view style="flex: 1;padding: 10rpx 0;" v-if="list.length >= 5"><u-loadmore :status="loadStatus"></u-loadmore></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: null, //当前选中的员工下标
			currentID: null, //当前选中的员工id
			isStaff: true, //是否是老板
			StaffPage: 1, //员工列表page
			StaffList: [], //员工列表
			trend_id: null, //动态id
			list: [], //动态列表
			page: 1, //动态分页
			loadStatus: 'loadmore',
			uid: ''
		};
	},
	computed: {
		navHeight() {
			var navHeights = uni.getStorageSync('StatusBarHeight');
			return navHeights.height;
		} // Nav栏高度
	},
	onPageScroll(e) {},
	onReachBottom() {
		var that = this;
		that.page++;
		that.loadStatus = 'loading';
		uni.showLoading({
			title: '加载中...'
		});

		let params = {
			page: that.page,
			trend_id: that.trend_id
		};
		that.$api.GetBrowseRecord(params).then(res => {
			if (res.code == 1) {
				let data = res.data;
				if (!res.data.length) {
					that.loadStatus = 'nomore';
					return;
				} else {
					that.loadStatus = 'loadmore';
				}
				// that.StaffList = that.StaffList.concat(data)
			}
		});
		setTimeout(() => {
			uni.hideLoading();
		}, 500);
	},
	onLoad(options) {
		var that = this;
		console.log(options);
		that.trend_id = options.trend_id;
		that.isStaff = uni.getStorageSync('isMaster') == 1 ? true : false;
		that.GetPromoter();
		that.GetBrowseRecord();
	},
	methods: {
		PhoneNumChange(Phone) {
			var mphone = Phone.substring(0, 3) + '****' + Phone.substring(7);
			return mphone;
		},
		// 选择员工
		SelectStaff(row, index) {
			var that = this;
			var data = that.StaffList;
			if (data.length != 0) {
				data.forEach((item, indexs) => {
					if (index == indexs) {
						item.current = !item.current;
						if (item.current == true) {
							that.uid = item.user_id;
							that.GetBrowseRecord();
						} else {
							that.uid = '';
							that.GetBrowseRecord();
						}
					} else {
						item.current = false;
					}
				});
			}
		},
		//员工列表
		GetPromoter() {
			var that = this;
			let params = {
				page: that.StaffPage
			};
			that.$api.GetPromoterList(params).then(res => {
				if (res.code == 1) {
					let data = res.data.list;
					if (data.length != 0) {
						data.forEach((item, index) => {
							item.current = false;
						});
						that.StaffList = data;
					}
					// console.log(data);
				}
			});
		},
		//员工分页
		PromoterScrool() {
			var that = this;
			that.StaffPage++;
			let params = {
				page: that.StaffPage
			};
			that.$api.GetPromoterList(params).then(res => {
				if (res.code == 1) {
					let data = res.data.list;
					if (data.length != 0) {
						data.forEach((item, index) => {
							item.current = false;
						});
						that.StaffList = that.StaffList.concat(data);
					}

					// console.log(data);
				}
			});
		},
		//获取数据列表
		GetBrowseRecord() {
			var that = this;
			let params = {
				page: that.page,
				trend_id: that.trend_id * 1,
				uid: that.uid == '' ? '' : that.uid
			};
			that.$api.GetBrowseRecord(params).then(res => {
				if (res.code == 1) {
					let data = res.data;
					// console.log(data);
					that.list = data;
					// that.StaffList = that.StaffList.concat(data)
					// console.log(data);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.TextAuto {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.staff {
	background: #fff;
	padding: 32rpx;
	position: fixed;
	margin-bottom: 20rpx;
	box-sizing: border-box;
	width: 100%;
	z-index: 99;
	box-shadow: 0rpx 15rpx 15rpx -15rpx rgba(192, 192, 192, 0.3);
	.staff_text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 28rpx;
	}
	.staff_list {
		display: flex;
		align-items: flex-start;
		.staff_item {
			margin-right: 12rpx;
			.staff_Image {
				width: 116rpx;
				height: 116rpx;
				background: #ffffff;
				border: 2px solid #fff;
				border-radius: 46%;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				image {
					width: 96rpx;
					height: 96rpx;
					border-radius: 46%;
				}
			}
			.staff_Name {
				font-size: 22rpx;
				font-weight: 500;
				color: #5d5d5d;
				text-align: center;
				margin-top: 14rpx;
			}
		}
	}
}
.history {
	padding: 32rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 99;
	.history_date {
		font-size: 26rpx;
		font-weight: 500;
		color: #292929;
		margin-bottom: 28rpx;
	}
	.history_Mian {
		padding: 24rpx 20rpx;
		background: #ffffff;
		box-shadow: 0rpx 2rpx 14rpx 0rpx #f5f5f5;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.history_left {
			display: flex;
			align-items: center;
			.history_Img {
				width: 92rpx;
				height: 92rpx;
				border-radius: 46%;
				overflow: hidden;
				margin-right: 24rpx;
			}
			.history_name {
				font-size: 32rpx;
				font-weight: 500;
				color: #292929;
				margin-bottom: 14rpx;
			}
			.history_Phone {
				font-size: 22rpx;
				font-weight: 500;
				color: #5f5f61;
			}
		}
		.history_time {
			font-size: 28rpx;
			font-weight: 500;
			color: #5f5f61;
		}
	}
}
</style>
